<template>
  <div class="circle">
    <div class="pie_left">
      <div
        class="left"
        :style="{ transform: 'rotate(' + left_rotate + 'deg)' }"
      ></div>
    </div>
    <div class="pie_right">
      <div
        class="right"
        :style="{ transform: 'rotate(' + rigth_rotate + 'deg)' }"
      ></div>
    </div>
    <div class="mask">
      <span>{{ score }}</span>
      <span>{{ text }}</span>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    if (this.score >= 5) {
      this.rigth_rotate = 180 - (this.score - 5) * 36;
    } else {
      this.rigth_rotate = 180;
      this.left_rotate = 180 - this.score * 36;
    }
  },
  data() {
    return {
      left_rotate: 0,
      rigth_rotate: 0,
    };
  },
  props: {
    score: Number,
    text: String,
  },
};
</script>
<style lang="less" scoped>
.circle {
  width: 66px;
  height: 66px;
  position: relative;
  border-radius: 50%;
  background: #fff;
}
.pie_left,
.pie_right {
  width: 66px;
  height: 66px;
  position: absolute;
  top: 0;
  left: 0;
}
.left {
}
.right {
  transform: rotate(10deg);
}
.left,
.right {
  display: block;
  width: 66px;
  height: 66px;
  background: #f9be00;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.pie_right,
.right {
  clip: rect(auto, auto, auto, 33px);
}
.pie_left,
.left {
  clip: rect(auto, 33px, auto, auto);
}
.mask {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background: #fff;
  color: #ff9900;
  position: absolute;
  text-align: center;
  //   line-height: 56px;
  font-size: 16px;
  span {
    display: block;
    margin-top: 5px;
  }
}
</style>
